<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Context menu from www.dhtmlgoodies.com</title>
	<meta name="Author" content="Alf Magne Kalleland (post@dhtmlgoodies.com)">
<META NAME="Generator" CONTENT="Alf Magne Kalleland (www.dhtmlgoodies.com)">
<meta name="KeyWords" content="DHTML context menu,context menu,DHTML right click menu,right click menu,Javascript context menu,Javascript right click menu">
<meta name="Description" content="A library of DHTML and Ajax scripts">
<meta name="country" content="Norway">
<meta name="organization-Email" content="post@dhtmlgoodies.com">
<meta name="copyright" content="copyright 2005 - Alf Magne Kalleland">
<meta name="coverage" content="Worldwide">
<meta name="revisit_after" content="30days">
<meta name="title" content="A library DHTML and Ajax scripts - DHTMLgoodies.com">
<meta name="identifier" content="http://www.dhtmlgoodies.com/">
<meta name="language" content="English">
<meta name="robots" content="follow">
<meta name="googlebot" content="index, follow">


		
	<style type="text/css">
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		margin-left:0px;
	}
	#contextMenu{
		border:1px solid #202867;
		background-color:#FFF;
		margin:0px;
		padding:0px;
		width:175px;
		font-family:arial;
		font-size:12px;
		background-image:url('http://www.dhtmlgoodies.com/scripts/images/gradient.gif');
		background-repeat:repeat-y;
		display:none;
		position:absolute;

	}
	#contextMenu a{
		color: #000;
		text-decoration:none;
		line-height:25px;
		vertical-align:middle;	
		display:block;	
		width:100%;
		clear:both;
		height:28px;
	}
	#contextMenu li{
		list-style-type:none;
		padding:1px;
		margin:1px;
		cursor:pointer;	
		clear:both;
	}
	#contextMenu li div{
		cursor:pointer;	
	}
	#contextMenu .contextMenuHighlighted{
		border:1px solid #000;
		padding:0px;
		background-color:#E2EBED;
	
	}
	#contextMenu img{
		border:0px;
	}
	#contextMenu .imageBox{

		float:left;
		padding-left:2px;
		padding-top:3px;
		vertical-align:middle;
		
		width: 30px;	/* IE 5.x */
		width/* */:/**/28px;	/* Other browsers */
		width: /**/28px;
	}
	#contextMenu .itemTxt{
		float:left;		
		width: 120px;	/* IE 5.x */
		width/* */:/**/140px;	/* Other browsers */
		width: /**/140px;		
	}
	</style>
	<script type="text/javascript">
	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, October 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/	
	var contextMenuObj;
	var MSIE = navigator.userAgent.indexOf('MSIE')?true:false;
	var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;	
	var activeContextMenuItem = false;
	function highlightContextMenuItem()
	{
		this.className='contextMenuHighlighted';
		activeContextMenuItem = this;
	}
	
	function deHighlightContextMenuItem()
	{
		this.className='';
	}
	
	function showContextMenu(e)
	 {
	  contextMenuSource = this;
	  if(activeContextMenuItem)activeContextMenuItem.className='';
	  if(document.all)e = event;
	  var xPos = e.clientX;
	  if(xPos + contextMenuObj.offsetWidth > (document.documentElement.offsetWidth-20)){
	   xPos = xPos + (document.documentElement.offsetWidth - (xPos + contextMenuObj.offsetWidth)) - 20; 
	  }
	  
	  var yPos = e.clientY;
	  if(window.document.body.scrollTop > 0)
	    {
	      yPos = (window.screen.Height) ? e.clientY + window.document.body.scrollTop -20 : e.clientY -20;
	    }
	    else if (window.pageYOffset) 
	    {
	      yPos = (window.pageYOffset > 0) ? e.clientY + window.pageYOffset -20 : e.clientY -20;
	    }
	    else
	    { yPos = e.clientY -20; }
	  /* * */
	  contextMenuObj.style.left = xPos + 'px';
	  contextMenuObj.style.top = yPos + 'px';
	  contextMenuObj.style.display='block';
	  return false; 
	}
 	
	function hideContextMenu(e)
	{
		if(document.all) e = event;
		if(e.button==0 && !MSIE){
			
		}else{
			contextMenuObj.style.display='none';
		}
	}
	
	function initContextMenu()
	{
		contextMenuObj = document.getElementById('contextMenu');
		contextMenuObj.style.display = 'block';
		var menuItems = contextMenuObj.getElementsByTagName('LI');
		for(var no=0;no<menuItems.length;no++){
			menuItems[no].onmouseover = highlightContextMenuItem;
			menuItems[no].onmouseout = deHighlightContextMenuItem;
			
			var aTag = menuItems[no].getElementsByTagName('A')[0];
			
			var img = menuItems[no].getElementsByTagName('IMG')[0];
			if(img){
				var div = document.createElement('DIV');
				div.className = 'imageBox';
				div.appendChild(img);
				
				if(MSIE && navigatorVersion<6){
					aTag.style.paddingLeft = '0px';
				}
				
				var divTxt = document.createElement('DIV');	
				divTxt.className='itemTxt';
				divTxt.innerHTML = aTag.innerHTML;
				
				aTag.innerHTML = '';
				aTag.appendChild(div);
				aTag.appendChild(divTxt);
				if(MSIE && navigatorVersion<6){
					div.style.position = 'absolute';
					div.style.left = '2px';
					divTxt.style.paddingLeft = '15px';
				}
				
				if(!document.all){
					var clearDiv = document.createElement('DIV');
					clearDiv.style.clear = 'both';
					aTag.appendChild(clearDiv);		
				}
			}else{
				if(MSIE && navigatorVersion<6){
					aTag.style.paddingLeft = '15px';
					aTag.style.width = (aTag.offsetWidth - 30) + 'px';
				}else{
					aTag.style.paddingLeft = '30px';
					aTag.style.width = (aTag.offsetWidth - 60) + 'px';
				}
			}
		}
		contextMenuObj.style.display = 'none';		
		document.documentElement.oncontextmenu = showContextMenu;
		document.documentElement.onclick = hideContextMenu;
	}

	</script>
</head>
<body>
<img src="http://www.dhtmlgoodies.com/images/heading3.gif">
<h1>Right click anywhere on this page to see how this context menu works</h1>
<ul id="contextMenu">
	<li><a href="http://www.dhtmlgoodies.com"><img src="images/button.gif">Home</a></li>
	<li><a href="#" onclick="document.getElementById('htmlSource').style.display='block';return false">View HTML</a></li>
	<li><a href="#">Menu item 3</a></li>
	<li><a href="#">Menu item 4</a></li>
</ul>
<script type="text/javascript">
initContextMenu();
</script>

<div id="htmlSource" style="color:red;font-family:courier;white-space:pre;display:none">
&lt;ul id="contextMenu">
	&lt;li>&lt;a href="http://www.dhtmlgoodies.com">&lt;img src="images/button.gif">Home&lt;/a>&lt;/li>
	&lt;li>&lt;a href="#" onclick="document.getElementById('htmlSource').style.display='block';return false">View HTML&lt;/a>&lt;/li>
	&lt;li>&lt;a href="#">Menu item 3&lt;/a>&lt;/li>
	&lt;li>&lt;a href="#">Menu item 4&lt;/a>&lt;/li>
&lt;/ul>

</div>
	
</body>
</html>